<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的预约 - 国家博物馆</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            padding-bottom: 90px;
        }
        
        .container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            position: relative;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #1a3a5f 0%, #2c5a8a 100%);
            color: white;
            padding: 20px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .back-btn {
            background: rgba(255,255,255,0.2);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        
        .title {
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        
        .action-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        
        /* 状态筛选 */
        .status-tabs {
            display: flex;
            background: white;
            padding: 10px 16px 0;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 76px;
            z-index: 90;
        }
        
        .status-tab {
            padding: 8px 16px;
            margin-right: 10px;
            border-radius: 20px;
            font-size: 14px;
            background: #f5f7fa;
            color: #666;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .status-tab.active {
            background: #1a73e8;
            color: white;
        }
        
        .status-tab .count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #e53935;
            color: white;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 预约卡片 */
        .reservation-list {
            padding: 16px;
        }
        
        .reservation-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            margin-bottom: 16px;
            position: relative;
            transform: translateY(0);
            transition: transform 0.3s ease;
        }
        
        .reservation-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #f9fbfd;
            border-bottom: 1px solid #eee;
        }
        
        .exhibition-image {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(45deg, #2c3e50, #4a6491);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .exhibition-image i {
            font-size: 40px;
            color: rgba(255,255,255,0.8);
        }
        
        .exhibition-info {
            flex: 1;
        }
        
        .exhibition-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 6px;
            color: #1a3a5f;
        }
        
        .exhibition-date {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 14px;
            margin-bottom: 4px;
        }
        
        .exhibition-date i {
            margin-right: 6px;
            color: #1a73e8;
        }
        
        .status-tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background: rgba(255, 152, 0, 0.15);
            color: #ff9800;
        }
        
        .status-completed {
            background: rgba(76, 175, 80, 0.15);
            color: #4caf50;
        }
        
        .status-cancelled {
            background: rgba(158, 158, 158, 0.15);
            color: #9e9e9e;
        }
        
        /* 卡片内容 */
        .card-content {
            padding: 16px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .info-label {
            color: #666;
            font-size: 14px;
        }
        
        .info-value {
            font-weight: 500;
            color: #333;
        }
        
        .divider {
            height: 1px;
            background: #f0f0f0;
            margin: 12px 0;
        }
        
        /* 操作区域 */
        .card-actions {
            display: flex;
            padding: 10px 16px;
            background: #fafbfc;
            border-top: 1px solid #f0f0f0;
        }
        
        .action-btn {
            flex: 1;
            text-align: center;
            padding: 8px;
            font-size: 14px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: color 0.3s ease;
        }
        
        .action-btn.cancel {
            color: #e53935;
        }
        
        .action-btn:hover {
            color: #1a73e8;
        }
        
        .action-btn.cancel:hover {
            color: #c62828;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 30px;
            display: none;
        }
        
        .empty-state i {
            font-size: 70px;
            color: #cbd5e0;
            margin-bottom: 20px;
        }
        
        .empty-title {
            font-size: 18px;
            font-weight: 600;
            color: #718096;
            margin-bottom: 15px;
        }
        
        .empty-desc {
            color: #a0aec0;
            font-size: 15px;
            margin-bottom: 25px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .explore-btn {
            display: inline-block;
            background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
            color: white;
            padding: 12px 35px;
            border-radius: 30px;
            font-weight: 500;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 500px;
            margin: 0 auto;
            background: white;
            display: flex;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            color: #666;
            font-size: 12px;
            position: relative;
            transition: color 0.3s ease;
        }
        
        .nav-item.active {
            color: #1a73e8;
        }
        
        .nav-item i {
            display: block;
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .nav-badge {
            position: absolute;
            top: 8px;
            right: 20%;
            background: #e53935;
            color: white;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .reservation-card {
            animation: fadeIn 0.4s ease forwards;
            animation-delay: calc(var(--i) * 0.1s);
            opacity: 0;
        }
        
        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 40px 0;
            display: none;
        }
        
        .loading i {
            font-size: 30px;
            color: #1a73e8;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式调整 */
        @media (max-width: 350px) {
            .status-tab {
                padding: 6px 12px;
                font-size: 13px;
            }
            
            .exhibition-title {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="header-content">
                <div class="back-btn">
                    <i class="fas fa-arrow-left"></i>
                </div>
                <div class="title">我的预约</div>
                <div class="action-btn">
                    <i class="fas fa-search"></i>
                </div>
            </div>
        </div>
        
        <!-- 状态筛选 -->
        <div class="status-tabs">
            <div class="status-tab active">待使用 <span class="count">2</span></div>
            <div class="status-tab">已完成</div>
            <div class="status-tab">已取消</div>
            <div class="status-tab">全部</div>
        </div>
        
        <!-- 预约列表 -->
        <div class="reservation-list" id="reservationList">
            <!-- 预约卡片 1 -->
            <div class="reservation-card" style="--i:0">
                <div class="card-header">
                    <div class="exhibition-image">
                        <i class="fas fa-landmark"></i>
                    </div>
                    <div class="exhibition-info">
                        <div class="exhibition-title">中国古代青铜器特展</div>
                        <div class="exhibition-date">
                            <i class="far fa-calendar-alt"></i>
                            2023年11月15日 14:00-16:00
                        </div>
                        <span class="status-tag status-pending">待使用</span>
                    </div>
                </div>
                
                <div class="card-content">
                    <div class="info-row">
                        <div class="info-label">预约编号</div>
                        <div class="info-value">NB2023111588</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">参观人数</div>
                        <div class="info-value">3人 (2成人, 1学生)</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">订单金额</div>
                        <div class="info-value" style="color: #e53935; font-weight: 600">¥130.00</div>
                    </div>
                    <div class="divider"></div>
                    <div class="info-row">
                        <div class="info-label">预约时间</div>
                        <div class="info-value">2023-11-10 14:25:36</div>
                    </div>
                </div>
                
                <div class="card-actions">
                    <div class="action-btn cancel">
                        <i class="fas fa-times"></i>
                        <span>取消预约</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-share-alt"></i>
                        <span>分享</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-qrcode"></i>
                        <span>二维码</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-ellipsis-h"></i>
                        <span>更多</span>
                    </div>
                </div>
            </div>
            
            <!-- 预约卡片 2 -->
            <div class="reservation-card" style="--i:1">
                <div class="card-header">
                    <div class="exhibition-image" style="background: linear-gradient(45deg, #8e44ad, #3498db);">
                        <i class="fas fa-paint-brush"></i>
                    </div>
                    <div class="exhibition-info">
                        <div class="exhibition-title">文艺复兴艺术珍品展</div>
                        <div class="exhibition-date">
                            <i class="far fa-calendar-alt"></i>
                            2023年11月18日 10:00-12:00
                        </div>
                        <span class="status-tag status-pending">待使用</span>
                    </div>
                </div>
                
                <div class="card-content">
                    <div class="info-row">
                        <div class="info-label">预约编号</div>
                        <div class="info-value">NB2023111203</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">参观人数</div>
                        <div class="info-value">2人 (2成人)</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">订单金额</div>
                        <div class="info-value" style="color: #e53935; font-weight: 600">¥80.00</div>
                    </div>
                    <div class="divider"></div>
                    <div class="info-row">
                        <div class="info-label">预约时间</div>
                        <div class="info-value">2023-11-05 09:45:22</div>
                    </div>
                </div>
                
                <div class="card-actions">
                    <div class="action-btn cancel">
                        <i class="fas fa-times"></i>
                        <span>取消预约</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-share-alt"></i>
                        <span>分享</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-qrcode"></i>
                        <span>二维码</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-ellipsis-h"></i>
                        <span>更多</span>
                    </div>
                </div>
            </div>
            
            <!-- 已完成预约卡片 -->
            <div class="reservation-card" style="--i:2">
                <div class="card-header">
                    <div class="exhibition-image" style="background: linear-gradient(45deg, #27ae60, #2ecc71);">
                        <i class="fas fa-fossil"></i>
                    </div>
                    <div class="exhibition-info">
                        <div class="exhibition-title">古生物化石展</div>
                        <div class="exhibition-date">
                            <i class="far fa-calendar-alt"></i>
                            2023年10月28日 13:00-15:00
                        </div>
                        <span class="status-tag status-completed">已完成</span>
                    </div>
                </div>
                
                <div class="card-content">
                    <div class="info-row">
                        <div class="info-label">预约编号</div>
                        <div class="info-value">NB2023102856</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">参观人数</div>
                        <div class="info-value">4人 (3成人, 1儿童)</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">订单金额</div>
                        <div class="info-value" style="color: #4caf50; font-weight: 600">¥160.00</div>
                    </div>
                    <div class="divider"></div>
                    <div class="info-row">
                        <div class="info-label">使用时间</div>
                        <div class="info-value">2023-10-28 13:15:22</div>
                    </div>
                </div>
                
                <div class="card-actions">
                    <div class="action-btn">
                        <i class="fas fa-redo"></i>
                        <span>再次预约</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-star"></i>
                        <span>收藏展览</span>
                    </div>
                    <div class="action-btn">
                        <i class="fas fa-comment"></i>
                        <span>写评论</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 空状态 -->
        <div class="empty-state" id="emptyState">
            <i class="far fa-calendar-check"></i>
            <div class="empty-title">暂无预约记录</div>
            <div class="empty-desc">您还没有任何预约记录，快去探索精彩展览吧！</div>
            <a href="#" class="explore-btn">去逛逛</a>
        </div>
        
        <!-- 加载状态 -->
        <div class="loading" id="loadingState">
            <i class="fas fa-spinner"></i>
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-compass"></i>
                <span>发现</span>
            </div>
            <div class="nav-item active">
                <i class="fas fa-ticket-alt"></i>
                <span>预约</span>
                <div class="nav-badge">2</div>
            </div>
            <div class="nav-item">
                <i class="fas fa-heart"></i>
                <span>收藏</span>
            </div>
            <div class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>

    <script>
        // 状态标签切换
        document.querySelectorAll('.status-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.status-tab').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 模拟加载状态
                document.getElementById('reservationList').style.display = 'none';
                document.getElementById('emptyState').style.display = 'none';
                document.getElementById('loadingState').style.display = 'block';
                
                setTimeout(() => {
                    document.getElementById('loadingState').style.display = 'none';
                    
                    if(this.textContent.includes('已完成') || this.textContent.includes('已取消')) {
                        document.getElementById('reservationList').style.display = 'block';
                        document.getElementById('emptyState').style.display = 'none';
                    } else if(this.textContent.includes('待使用')) {
                        document.getElementById('reservationList').style.display = 'block';
                        document.getElementById('emptyState').style.display = 'none';
                    } else {
                        // 模拟空状态
                        document.getElementById('reservationList').style.display = 'none';
                        document.getElementById('emptyState').style.display = 'block';
                    }
                }, 800);
            });
        });
        
        // 取消预约操作
        document.querySelectorAll('.action-btn.cancel').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.reservation-card');
                
                if(confirm('确定要取消该预约吗？取消后如需参观需重新预约。')) {
                    card.style.opacity = '0.5';
                    card.style.pointerEvents = 'none';
                    
                    // 模拟取消操作
                    setTimeout(() => {
                        card.style.display = 'none';
                        alert('预约已成功取消！');
                    }, 800);
                }
            });
        });
        
        // 卡片点击查看详情
        document.querySelectorAll('.reservation-card').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.exhibition-title').textContent;
                alert(`进入预约详情页：${title}`);
            });
        });
        
        // 返回按钮
        document.querySelector('.back-btn').addEventListener('click', function() {
            alert('返回上一页');
        });
    </script>
</body>
</html>